<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CSS 揭秘 第3章</title>
  <link rel="stylesheet" href="css-secrets-3.css">  
</head>
<body>
  <h2>9.自适应的椭圆</h2>
  <div class="example-9">
    <div class="single">单独一个椭圆，采用 border-radius: 50% / 50%</div>
    <div class="half">半个椭圆</div>
    <div class="quarter">半个椭圆</div>
  </div>

  <h2>10.平行四边形</h2>
  <div class="example-10">
    <a href="#" class="multiple">
      <div>嵌套元素方案</div>
    </a>

    <a href="#" class="pseudo">
      伪元素方案
    </a>
  </div>

  <h2>11.菱形图片</h2>
  <div class="example-11">
    <div class="picture">
      <img src="http://img0.pclady.com.cn/pclady/1511/11/1389597_3.jpg" alt="小猫">
    </div>
    <h3>使用 <code>clip-path</code></h3>
    <img class="clip" src="http://img0.pclady.com.cn/pclady/1511/11/1389597_3.jpg" alt="小猫">
  </div>

  <h2>12.切角效果</h2>
  <div class="example-12">
    <div class="gradient">
      采用渐变切角
    </div>
    <div class="svg">
      svg + border-image
    </div>
    <div class="clip">
      剪裁方案 clip-path
    </div>
  </div>

  <h2>13.梯形标签页</h2>
  <div class="example-13">
    <div class="tab">
      采用 perspective 来画梯形
    </div>
  </div>

  <h3>14.简单的饼图</h3>
  <div class="example-14">
      <div class="pie" style="animation-delay: -20s">20</div>  
      <svg viewBox="0 0 32 32">
          <circle r="16" cx="16" cy="16" />
      </svg>
  </div>
  
</body>
</html>
